<template>
    <div class="header">
        <div class="header-fixed">
            <div class="header-inner">
                <div class="header-left">
                    <div class="header-left-menu">
                        <div class="menu-icon" @click="openMenu">Menu</div>
                    </div>
                </div>
                <div class="header-right">
                    <div @click.native="changeCategory(item.id)" class="header-right-text" v-for="item in categories" :key="item.id">
                        {{ item.title }}
                    </div>
                </div>
            </div>
        </div>
        <div class="popup">
            <div class="popup-mask-layer" @click="show = false" v-show="show"></div>
            <div class="popup-body" :class="show ? 'popup-show' : 'popup-hidden'">
                <div class="popup-content">
                    <div class="menu-sidebar">
                        <div class="menu-item" v-for="item in categories" :key="item.id">
                            <span @click.native="changeCategory(item.id)">{{ item.title }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { get } from "@/util/request.js";
import { onMounted, ref } from "vue";
import isMobile from "../util/isMobile.js";

const categories = ref([]);
const emit = defineEmits(["changeCategory"]);
const show = ref(false);

onMounted(() => {
    get("/category/get").then((resp) => {
        categories.value = resp.insts;
    });
});

const changeCategory = (id) => {
    emit("changeCategory", id);
    drawer.value = false;
};

const openMenu = () => {
    show.value = true;
};
</script>

<style scoped>
.header-fixed {
    height: 80px;
    padding: 0 15px;
    background: #fff;
    box-sizing: border-box;
}
.PC .header {
    width: 100%;
}
.PC .header-fixed {
    border-bottom: 1px solid rgba(199, 187, 237, 0.5);
}
.PC .header-inner {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
}
.PC .header-right {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-size: 14px;
    align-items: end;
    gap: 66px;
    padding-right: 66px;
}
.PC .header-right-text {
    color: #2c2c34;
    cursor: pointer;
    font-size: 14px;
}
.PC .header-right-login {
    background: #0066ed;
    border: none;
    padding: 10px 15px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    font-size: 14px;
    color: #fff;
    white-space: nowrap;
    cursor: pointer;
}
.PC .router-link-active {
    color: #0066ed;
}

.PC .popup {
    display: none;
}
.PC .header-left-menu {
    display: none;
}
</style>
<style scoped>
.mobile .header-right-text {
    display: none;
}
.mobile .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    background-color: #fff;
}
.mobile .header-left-menu {
    display: flex;
    align-items: center;
}
.popup {
    flex: 1;
    transition: all 350ms;
}
.popup-mask-layer {
    transition-property: opacity;
    transition-duration: 350ms;
    transition-timing-function: ease-out;
    position: fixed;
    inset: 0px;
    z-index: 10070;
    background-color: rgba(0, 0, 0, 0.5);
}
.popup-body {
    transition-duration: 300ms;
    transition-timing-function: ease-out;
    transition-property:
        transform,
        -webkit-transform;
    z-index: 10075;
    position: fixed;
    display: flex;
    left: 0px;
    bottom: 0px;
    top: 0px;
}
.popup-content {
    background-color: #fff;
    position: relative;
    overflow: auto;
    flex: 1 1 0%;
}
.menu-sidebar {
    padding: 10px;
}
.menu-item {
    min-width: 38.2vw;
    height: 60px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid #ebebeb;
}
.menu-item > span {
    margin-left: 11px;
}
.popup-show {
    transform: translateX(0);
}

.popup-hidden {
    transform: translateX(-100%);
}
.router-link-active {
    color: #0066ed;
}
</style>
